<template>
  <div>
    <div class="user">
      <van-cell-group>
        <!-- 用户信息 -->
        <van-cell class="user-info">

          <van-image round width="1.5rem" height="1.5rem" src="user.imageUrl" class="user-image" />

          <div class="user-info-content">
            <h3>小何不想学习</h3>
            <span class="user-info-edit">
              <van-icon name="edit" />
              <span>编辑用户信息</span>
            </span>
          </div>

        </van-cell>
        <!-- 账户信息 -->
        <van-cell class="account-info">
          <van-grid :border="false">
            <van-grid-item>
              <span>
                <span class="grid-item-value">14.05</span><br>
                <span class="grid-item-title">token字数</span>
              </span>
            </van-grid-item>
            
            <van-grid-item>
              <span>
                <span class="grid-item-value">100</span><br>
                <span class="grid-item-title">绘画额度</span>
              </span>
            </van-grid-item>
            <van-grid-item>
              <span>
                <span class="grid-item-value">213</span><br>
                <span class="grid-item-title">积分</span>
              </span>
            </van-grid-item>
            <van-grid-item>
              <span>
                <span class="grid-item-value">**</span><br>
                <span class="grid-item-title">社区贡献</span>
              </span>
            </van-grid-item>
          </van-grid>
        </van-cell>

        <div class="other">
          <van-cell title="单元格" is-link  icon="location-o" value="收益200元" />
          <van-cell title="设置" to="/userSetting" is-link icon="setting-o" />
          <van-cell title="我的下载" is-link icon="down" />
          <van-cell title="帮助与反馈" is-link icon="question-o" />
          <van-cell title="关于" is-link icon="warning-o" value="V2.0.0" />
        </div>
      </van-cell-group>
      
    </div>
    <PublicFooter></PublicFooter>
  </div>
</template>

<script>
import PublicFooter from '@/components/PublicFooter'
export default {
  name: 'UserInfo',
  data() {
    return {}
  },
  components: {
    PublicFooter
  },
  computed: {},
  methods: {}
}
</script>

<style scoped lang='scss'>
.user-info {
  background-color: rgba(178, 31, 222, 0.211);
}
.user-info .van-cell__value {
  display: flex;
}

.user-image {
  margin: 15px;
  margin-top: 20px;
}

.user-info-content h3 {
  margin: 15px 0px 10px 0px;
  text-align: left;
  font-size: 22px;
}

.user-info-edit {

  font-size: 20px;

  .van-icon {
    margin: 0px 0px 0px 0px;
  }
}
.account-info {
  background-color: rgba(255, 235, 205, 0.952);
}
.account-info  .van-cell__value {
  border-radius: 10px 10px;
}
  .grid-item-value{
  font-size: 22px;
  font-weight: 700;
}
.other .van-cell  {
  text-align: left;
}
.other .van-cell__value span{
  color: blueviolet;
}
</style>
